<template>
  <div class="sign">
    <!-- logo -->
    <div class="logo">
      <router-link to="/home">
        <img src="../img/logo.png">
      </router-link>
    </div>
    <div class="content">
      <div class="login_register">
        <div class="title">
          <h4>
            <router-link
              to="/sign/login"
              class="link"
            >登录</router-link>
            <b>·</b>
            <router-link
              to="/sign/register"
              class="link"
            >注册</router-link>
          </h4>
        </div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sign",
};
</script>

<style scoped>
.sign {
  height: 100vh;
  background-color: #f1f1f1;
}
.logo {
  position: absolute;
  top: 55px;
  left: 55px;
}
.content {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  padding-top: 45px;
  background: url("../img/sign_in_bg.png") no-repeat;
  background-size: 40%;
  background-position: 45px 45px;
  position: relative;
}
.login_register {
  float: right;
  width: 400px;
  height: 500px;
  background-color: white;
}
.title {
  text-align: center;
  padding-bottom: 25px;
  padding-top: 55px;
}
a {
  text-decoration: none;
  color: lightgray;
}
.link {
  font-size: 20px;
  padding: 0px 15px 0px 15px;
}
</style>